<script setup>
import { onMounted, nextTick, ref, reactive, watch, toRefs } from 'vue'
import {
  ArrowRight,
  ArrowLeft,
} from '@element-plus/icons-vue'
const props = defineProps({
  height: {
    type: Number,
    default: 350
  },
  width: {
    type: Number,
    default: 850
  },
  pictures: {
    type: Array,
    default: [
      {
        name: "海浪",
        src: "/img/putuo0.jpg",
        src_active: "/img/海浪_active.png"
      },
      {
        name: "海风",
        src: "/img/shengsi0.jpg",
        src_active: "/img/海风_active.png"
      },
      {
        name: "海温",
        src: "/img/xiangshan0.jpg",
        src_active: "/img/海温_active.png"
      },
      {
        name: "海温",
        src: "/img/海温.png",
        src_active: "/img/海温_active.png"
      },
      {
        name: "海温",
        src: "/img/海温.png",
        src_active: "/img/海温_active.png"
      },
      {
        name: "海温",
        src: "/img/海温.png",
        src_active: "/img/海温_active.png"
      },
    ]
  },
  nums: {
    type: Number,
    default: 3
  }
})

const { height, width, pictures, nums } = toRefs(props)
// const picHeight = ref(height.value / nums.value)
const picWidth = ref(width.value / nums.value)

const carouselStyle = reactive({
  height: height.value + 'px',
  width: width.value + (nums.value - 1) * 20 + 'px'
})

const carouselItemStyle = reactive({
  height: height.value + 'px',
  width: picWidth.value + 'px'
})

const isHover = ref(false)
const handleIn = () => {
  isHover.value = true
}

const handleOut = () => {
  isHover.value = false
}

let imgIndex = ref(0)
const imgNext = (index) => {
  if (index == 0) {
    let marginLeftNum = document.getElementsByClassName('carousel_more_item')[0].style.marginLeft?.split('px')
    if (pictures.value.length - imgIndex.value == nums.value) return
    document.getElementsByClassName('carousel_more_item')[0].style.marginLeft = Number(marginLeftNum[0]) - picWidth.value - 20 + 'px'
    imgIndex.value++
  } else {
    let marginLeftNum = document.getElementsByClassName('carousel_more_item')[0].style.marginLeft?.split('px')
    // if (marginLeftNum[0] == '' || Math.abs(marginLeftNum[0]) < 1) return
    if (imgIndex.value == 0) return
    document.getElementsByClassName('carousel_more_item')[0].style.marginLeft = Number(marginLeftNum[0]) + picWidth.value + 20 + 'px'
    imgIndex.value--
  }
}
</script>

<template>
  <div class="carousel_more" :style="carouselStyle" @mouseenter="handleIn" @mouseleave="handleOut">
    <div v-for="item in pictures" class="carousel_more_item"
      :style="[carouselItemStyle, { backgroundImage: `url(${item.src})` }]">
    </div>
    <Transition name="fade">
      <div class="next_btn next_btn_left" v-show="isHover && pictures.length - imgIndex != nums" @click="imgNext(0)">
        <!-- <LeftCircleTwoTone /> -->
        <el-icon>
          <ArrowLeft style="color: whitesmoke;" />
        </el-icon>
      </div>
    </Transition>
    <Transition name="fade">
      <div class="next_btn next_btn_right" v-show="isHover && imgIndex != 0" @click="imgNext(1)">
        <el-icon>
          <ArrowRight style="color: whitesmoke;" />
        </el-icon>
      </div>
    </Transition>
  </div>
</template>

<style lang='less' scoped>
.carousel_more {
  display: flex;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;

  .carousel_more_item {
    overflow: hidden;
    flex-shrink: 0;
    height: 100%;
    background-size: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: var(--r-border-radius);
    margin-right: 20px;
    transition: all 0.5s ease;
    cursor: pointer;
    &:hover {
      // 背景图片放大
      background-size: 110%;
    }
  }

  .next_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgb(88, 88, 86);
    padding: 5px;
    cursor: pointer;

    &.next_btn_left {
      left: 30px;
    }

    &.next_btn_right {
      right: 30px;
    }
  }
}</style>